<template>
  <div class="luck_draw phoneCSS">
    <x-dialog
      v-model="showDialog"
      :dialog-style="{'max-width': '100%', width: '100%', height: '50%', 'background-color': 'transparent'}"
    >
      <p
        style="color:#fff;text-align:center;"
        @click="showDialog = false"
      >
        <div class="dialog_container">
          <div
            class="cont"
            v-if="items.luckyZodiac"
          >
            <p>本轮活动共中出<span>{{items.luckyZodiac.split('/').length}}</span>个幸运生肖</p>
            <p><span>{{items.winPeopleNumber}}</span>人参与了本轮奖池瓜分</p>
          </div>
        </div>
        <br>
        <br>
        <x-icon
          type="ios-close-outline"
          style="fill:#fff;"
          @click="goYindao"
        ></x-icon>
      </p>
    </x-dialog>

    <x-dialog
      v-model="showDialog1"
      hide-on-blur
      class="showDialog1"
      @click="showDialog1=false"
      :dialog-style="{'max-width': '100%', width: '100%', height: '100vh', 'background-color': 'transparent', position: 'absolute',top:topDaig+'px'}"
    >
      <p
        style="color:#fff;text-align:center;"
        @click="showDialog1 = false"
      >
        <div
          class="dialog_container_y"
          @click="showDialog1=false"
        >
          <img
            style="width:5.56rem;height:4.04rem;    position: absolute;right: 0.2667rem;top:40px"
            :src="yingdao"
          >
        </div>
        <br>
        <br>
        <!-- <x-icon
          type="ios-close-outline"
          style="fill:#fff;"
          @click="showDialog1=false"
        ></x-icon> -->
      </p>
    </x-dialog>

    <div id="view-model">
      <div
        class="view-model-content"
        @click="close()"
      >
        <img src="" />
      </div>

    </div>
    <ex-header title="开年活动"><a
        slot="right"
        @click="goPage()"
      >我的奖励</a></ex-header>
    <div class="luck_draw_container">
      <div id="lottery">
        <table
          border="0"
          cellpadding="0"
          cellspacing="0"
        >
          <tbody>
            <tr>
              <td class="lottery-unit lottery-unit-0"><img
                  data-index="0"
                  :src="unitDef_0"
                ></td>
              <td class="lottery-unit lottery-unit-1"><img
                  data-index="1"
                  :src="unitDef_1"
                ></td>
              <td class="lottery-unit lottery-unit-2"><img
                  data-index="2"
                  :src="unitDef_2"
                ></td>
              <td class="lottery-unit lottery-unit-3"><img
                  data-index="3"
                  :src="unitDef_3"
                ></td>
            </tr>
            <tr>
              <td class="lottery-unit lottery-unit-11"><img
                  data-index="11"
                  :src="unitDef_11"
                ></td>
              <td
                colspan="2"
                rowspan="2"
                @click="go()"
              ></td>
              <td class="lottery-unit lottery-unit-4"><img
                  data-index="4"
                  :src="unitDef_4"
                ></td>
            </tr>
            <tr>
              <td class="lottery-unit lottery-unit-10"><img
                  data-index="10"
                  :src="unitDef_10"
                ></td>
              <td class="lottery-unit lottery-unit-5"><img
                  data-index="5"
                  :src="unitDef_5"
                ></td>
            </tr>
            <tr>
              <td class="lottery-unit lottery-unit-9"><img
                  data-index="9"
                  :src="unitDef_9"
                ></td>
              <td class="lottery-unit lottery-unit-8"><img
                  data-index="8"
                  :src="unitDef_8"
                ></td>
              <td class="lottery-unit lottery-unit-7"><img
                  data-index="7"
                  :src="unitDef_7"
                ></td>
              <td class="lottery-unit lottery-unit-6"><img
                  data-index="6"
                  :src="unitDef_6"
                ></td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
    <div class="luck_draw_footer">
      <div class="luck_draw_footer_ware">
        <div class="luck_draw_footer_ware_title">
          <img :src="luckText" />
        </div>
        <div class="luck_draw_footer_ware_flex">
          <div style="height:40px;    text-align: center;">
            <span
              v-for="(win,index) in copyprizeArr.length"
              style="margin:0 10px"
            >
              <span :class="'flex-demo winning'+index"><img
                  v-if="winning[index]"
                  :src="winning[index]"
                /><img
                  v-else
                  :src="lucked"
                /></span>
            </span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import "@/static/js/jquery-1.8.3.min.js";
import unit_0 from "@/static/images/newYearActivities/rat.png";
import unit_1 from "@/static/images/newYearActivities/cattle.png";
import unit_2 from "@/static/images/newYearActivities/tiger.png";
import unit_3 from "@/static/images/newYearActivities/rabbit.png";
import unit_11 from "@/static/images/newYearActivities/loong.png";
import unit_4 from "@/static/images/newYearActivities/snake.png";
import unit_10 from "@/static/images/newYearActivities/horse.png";
import unit_5 from "@/static/images/newYearActivities/sheep.png";
import unit_9 from "@/static/images/newYearActivities/monkey.png";
import unit_8 from "@/static/images/newYearActivities/chicken.png";
import unit_7 from "@/static/images/newYearActivities/dog.png";
import unit_6 from "@/static/images/newYearActivities/pig.png";

import uniting_0 from "@/static/images/newYearActivities/rating.png";
import uniting_1 from "@/static/images/newYearActivities/cattleing.png";
import uniting_2 from "@/static/images/newYearActivities/tigering.png";
import uniting_3 from "@/static/images/newYearActivities/rabbiting.png";
import uniting_11 from "@/static/images/newYearActivities/loonging.png";
import uniting_4 from "@/static/images/newYearActivities/snakeing.png";
import uniting_10 from "@/static/images/newYearActivities/horseing.png";
import uniting_5 from "@/static/images/newYearActivities/sheeping.png";
import uniting_9 from "@/static/images/newYearActivities/monkeying.png";
import uniting_8 from "@/static/images/newYearActivities/chickening.png";
import uniting_7 from "@/static/images/newYearActivities/doging.png";
import uniting_6 from "@/static/images/newYearActivities/piging.png";

import united_0 from "@/static/images/newYearActivities/rated.png";
import united_1 from "@/static/images/newYearActivities/cattleed.png";
import united_2 from "@/static/images/newYearActivities/tigered.png";
import united_3 from "@/static/images/newYearActivities/rabbited.png";
import united_11 from "@/static/images/newYearActivities/loonged.png";
import united_4 from "@/static/images/newYearActivities/snakeed.png";
import united_10 from "@/static/images/newYearActivities/horseed.png";
import united_5 from "@/static/images/newYearActivities/sheeped.png";
import united_9 from "@/static/images/newYearActivities/monkeyed.png";
import united_8 from "@/static/images/newYearActivities/chickened.png";
import united_7 from "@/static/images/newYearActivities/doged.png";
import united_6 from "@/static/images/newYearActivities/piged.png";

import luckText from "@/static/images/newYearActivities/luckText.png";
import lucked from "@/static/images/newYearActivities/lucked.png";
import store from "@/store/index.js";

import yingdao from "@/static/images/newYearActivities/yindao.png";
import { platform } from "@/utils/nav";
import { mapGetters } from "vuex";
import { Flexbox, FlexboxItem, XDialog } from "vux";
import exHeader from "../../../components/xheader/index";
export default {
  components: { Flexbox, FlexboxItem, XDialog, exHeader },
  data() {
    return {
      unitDef_0: unit_0,
      unitDef_1: unit_1,
      unitDef_2: unit_2,
      unitDef_3: unit_3,
      unitDef_11: unit_11,
      unitDef_4: unit_4,
      unitDef_10: unit_10,
      unitDef_5: unit_5,
      unitDef_9: unit_9,
      unitDef_8: unit_8,
      unitDef_7: unit_7,
      unitDef_6: unit_6,

      unit_0: unit_0,
      unit_1: unit_1,
      unit_2: unit_2,
      unit_3: unit_3,
      unit_11: unit_11,
      unit_4: unit_4,
      unit_10: unit_10,
      unit_5: unit_5,
      unit_9: unit_9,
      unit_8: unit_8,
      unit_7: unit_7,
      unit_6: unit_6,

      uniting_0: uniting_0,
      uniting_1: uniting_1,
      uniting_2: uniting_2,
      uniting_3: uniting_3,
      uniting_11: uniting_11,
      uniting_4: uniting_4,
      uniting_10: uniting_10,
      uniting_5: uniting_5,
      uniting_9: uniting_9,
      uniting_8: uniting_8,
      uniting_7: uniting_7,
      uniting_6: uniting_6,

      united_0: united_0,
      united_1: united_1,
      united_2: united_2,
      united_3: united_3,
      united_11: united_11,
      united_4: united_4,
      united_10: united_10,
      united_5: united_5,
      united_9: united_9,
      united_8: united_8,
      united_7: united_7,
      united_6: united_6,
      yingdao: yingdao,
      prizeArr: [],
      copyprizeArr: [],
      showDialog: false,
      showDialog1: true,
      luckText: luckText,
      lucked: lucked,
      click: false,
      topDaig:40,
      winning: [],
      copyprize: -1,
      prizePosition: [],
      position: [
        "鼠",
        "牛",
        "虎",
        "兔",
        "蛇",
        "羊",
        "猪",
        "狗",
        "鸡",
        "猴",
        "马",
        "龙"
      ],
      lottery: {
        obj: {},
        index: 1, //当前转动到哪个位置，起点位置
        count: 0, //总共有多少个位置
        timer: 0, //setTimeout的ID，用clearTimeout清除
        speed: 20, //初始转动速度
        times: 0, //转动次数
        cycle: 50, //转动基本次数：即至少需要转动多少次再进入抽奖环节
        prize: -1 //中奖位置
      }
    };
  },
  created() {},
  mounted() {
    let query = this.$route.query;
    let sceneId = parseInt(query.sceneId);
    this.isPlate()
    store.dispatch("operSceneResult", sceneId).then(res => {
      // this.items.luckyZodiac = '鼠/牛/虎/兔/蛇/羊/猪/狗/鸡/猴/马';
      if (this.items.luckyZodiac) {
        let arr = this.items.luckyZodiac.split("/");
        for (var i = 0; i < arr.length; i++) {
          this.forPosition(this.position, arr[i]);
        }
        this.copyprizeArr = JSON.parse(JSON.stringify(this.prizeArr));
        this.go();
      }
    });
    this.init("lottery");
    var me = this;
  },
  computed: {
    ...mapGetters({
      items: "sceneResult"
    })
  },
  methods: {
    isPlate(){
        if(platform()=="ios"){
           this.topDaig=60;
        }
    },
    goYindao() {
      this.showDialog = false;
      this.showDialog1 = true;
    },
    goPage() {
      this.$router.replace({ path: "/reward" });
    },
    forPosition(obj, pam) {
      this.prizeArr.push(obj.indexOf(pam));
    },
    close() {
      var me = this;
      $("#view-model").css("background-color", "rgba(0, 0, 0, 0)");
      var left = $(".winning" + me.winning.length).offset().left + 20;
      var top = $(".winning" + me.winning.length).offset().top + 0;
      $(".view-model-content").css("transform", "scale(0, 0)");
      $(".view-model-content").animate({
        left: left,
        top: top
      });
      setTimeout(() => {
        me.wining(me.copyprize);
        $("#view-model").hide();
        $(".view-model-content").css({ left: "50%", top: "50%" });
        setTimeout(() => {
          me.go();
        }, 1000);
      }, 600);
    },
    go() {
      if (this.winning.length >= this.copyprizeArr.length) {
        this.showDialog = true;
        return;
      }
      if (this.click) {
        return false;
      } else {
        this.lottery.speed = 100;
        if ($(".copyDom")) {
          $(".copyDom").remove();
        }
        this.roll();
        this.click = true;
        return false;
      }
    },
    init(id) {
      if ($("#" + id).find(".lottery-unit").length > 0) {
        var $lottery = $("#" + id);
        var $units = $lottery.find(".lottery-unit");
        this.lottery.obj = $lottery;
        this.lottery.count = $units.length;
        // $lottery.find(".lottery-unit-" + this.lottery.index).addClass("active");
      }
    },
    rolls() {
      var index = this.lottery.index;
      var count = this.lottery.count;
      var lottery = this.lottery.obj;
      var me = this;
      // $(lottery)
      //   .find(".lottery-unit-" + index)
      //   .removeClass("active");
      if (!this.some(this.prizePosition, index)) {
        this.matchingReset(index);
      }

      index += 1;

      if (index > count - 1) {
        index = 0;
      }
      if (this.some(this.prizePosition, index)) {
        this.lottery.index = index;
        return;
      }
      // $(lottery)
      //   .find(".lottery-unit-" + index)
      //   .addClass("active");
      // this.matchingdef(index);

      this.matchingding(index);
      this.lottery.index = index;
      return false;
    },
    stop(index) {
      this.lottery.prize = index;
      return false;
    },
    roll() {
      let lottery = this.lottery;
      let me = this;
      lottery.times += 1;
      this.rolls();
      if (
        lottery.times > lottery.cycle + 10 &&
        lottery.prize == lottery.index
      ) {
        clearTimeout(lottery.timer);
        console.log("中奖位置：" + lottery.prize);
        this.prizeArr.shift();
        this.copyprize = JSON.parse(JSON.stringify(lottery.prize));
        this.matchinged(lottery.prize);
        this.animation(lottery.prize);
        lottery.prize = -1;
        lottery.times = 0;
        this.click = false;
      } else {
        if (lottery.times < lottery.cycle) {
          lottery.speed -= 10;
        } else if (lottery.times == lottery.cycle) {
          //  var index = (Math.random() * lottery.count) | 0;
          var index = this.prizeArr[0];
          lottery.prize = index;
        } else {
          if (
            lottery.times > lottery.cycle + 10 &&
            ((lottery.prize == 0 && lottery.index == 7) ||
              lottery.prize == lottery.index + 1)
          ) {
            lottery.speed += 110;
          } else {
            lottery.speed += 20;
          }
        }
        if (lottery.speed < 40) {
          lottery.speed = 40;
        }
        setTimeout(() => {
          me.roll();
        }, lottery.speed);
      }
      return false;
    },
    matchingReset(index) {
      if (index == 0) {
        this.unitDef_0 = this.unit_0;
      }
      if (index == 1) {
        this.unitDef_1 = this.unit_1;
      }
      if (index == 2) {
        this.unitDef_2 = this.unit_2;
      }
      if (index == 3) {
        this.unitDef_3 = this.unit_3;
      }
      if (index == 11) {
        this.unitDef_11 = this.unit_11;
      }
      if (index == 4) {
        this.unitDef_4 = this.unit_4;
      }
      if (index == 10) {
        this.unitDef_10 = this.unit_10;
      }
      if (index == 5) {
        this.unitDef_5 = this.unit_5;
      }
      if (index == 9) {
        this.unitDef_9 = this.unit_9;
      }
      if (index == 8) {
        this.unitDef_8 = this.unit_8;
      }
      if (index == 7) {
        this.unitDef_7 = this.unit_7;
      }
      if (index == 6) {
        this.unitDef_6 = this.unit_6;
      }
    },
    matchingding(index) {
      if (index == 0) {
        this.unitDef_0 = this.uniting_0;
      }
      if (index == 1) {
        this.unitDef_1 = this.uniting_1;
      }
      if (index == 2) {
        this.unitDef_2 = this.uniting_2;
      }
      if (index == 3) {
        this.unitDef_3 = this.uniting_3;
      }
      if (index == 11) {
        this.unitDef_11 = this.uniting_11;
      }
      if (index == 4) {
        this.unitDef_4 = this.uniting_4;
      }
      if (index == 10) {
        this.unitDef_10 = this.uniting_10;
      }
      if (index == 5) {
        this.unitDef_5 = this.uniting_5;
      }
      if (index == 9) {
        this.unitDef_9 = this.uniting_9;
      }
      if (index == 8) {
        this.unitDef_8 = this.uniting_8;
      }
      if (index == 7) {
        this.unitDef_7 = this.uniting_7;
      }
      if (index == 6) {
        this.unitDef_6 = this.uniting_6;
      }
    },
    matchinged(index) {
      if (index == 0) {
        this.unitDef_0 = this.united_0;
      }
      if (index == 1) {
        this.unitDef_1 = this.united_1;
      }
      if (index == 2) {
        this.unitDef_2 = this.united_2;
      }
      if (index == 3) {
        this.unitDef_3 = this.united_3;
      }
      if (index == 11) {
        this.unitDef_11 = this.united_11;
      }
      if (index == 4) {
        this.unitDef_4 = this.united_4;
      }
      if (index == 10) {
        this.unitDef_10 = this.united_10;
      }
      if (index == 5) {
        this.unitDef_5 = this.united_5;
      }
      if (index == 9) {
        this.unitDef_9 = this.united_9;
      }
      if (index == 8) {
        this.unitDef_8 = this.united_8;
      }
      if (index == 7) {
        this.unitDef_7 = this.united_7;
      }
      if (index == 6) {
        this.unitDef_6 = this.united_6;
      }
    },
    wining(index) {
      if (this.winning.length == this.copyprizeArr.length) {
        return;
      }
      this.prizePosition.push(index);
      if (index == 0) {
        this.winning.push(this.unit_0);
      }
      if (index == 1) {
        this.winning.push(this.unit_1);
      }
      if (index == 2) {
        this.winning.push(this.unit_2);
      }
      if (index == 3) {
        this.winning.push(this.unit_3);
      }
      if (index == 11) {
        this.winning.push(this.unit_11);
      }
      if (index == 4) {
        this.winning.push(this.unit_4);
      }
      if (index == 10) {
        this.winning.push(this.unit_10);
      }
      if (index == 5) {
        this.winning.push(this.unit_5);
      }
      if (index == 9) {
        this.winning.push(this.unit_9);
      }
      if (index == 8) {
        this.winning.push(this.unit_8);
      }
      if (index == 7) {
        this.winning.push(this.unit_7);
      }
      if (index == 6) {
        this.winning.push(this.unit_6);
      }
    },
    some(arr, par) {
      return arr.some(re => {
        console.log("值：" + re, ":" + par);
        return re == par;
      });
    },
    animation(sum) {
      const me = this;
      var el = $(".lottery-unit-" + sum);
      $(".view-model-content").empty();
      var copy = el.children("img").clone();
      $(".view-model-content").append(copy);
      $("#view-model").css("display", "flex");
      setTimeout(() => {
        $(".view-model-content").css("transform", " scale(1, 1)");
        $("#view-model").css("background-color", "rgba(0, 0, 0, 0.6)");
        setTimeout(() => {
          me.close();
        }, 1000);
      }, 100);
    }
  }
};
</script>
<style lang="scss" scoped>
.luck_draw {
  height: 100%;
  background-image: url(../../../static/images/newYearActivities/knhdBg.png);
  background-size: 100% 100%;
  position: relative;
  .luck_draw_container {
    width: 10rem;
    margin: 0 auto;
    height: 11.3333rem;
    background-image: url(../../../static/images/newYearActivities/luckDraw_background.png);
    background-size: 100% 100%;
  }
  .luck_draw_ing {
    width: 100%;
    height: 100%;
  }
  .luck_draw_footer {
    height: calc(100% - 11.3333rem - 1.22rem);
    position: absolute;
    left: 0;
    width: 100%;
    bottom: 0;
  }
  .dialog_container_y{
    position: absolute;
    height: 100vh;
    width: 100%;
  }
  .luck_draw_footer_ware {
    background-image: url(../../../static/images/newYearActivities/luckFoot.png);
    background-size: 100% 100%;
    height: 5.6667rem;
    position: absolute;
    bottom: 0;
    width: 100%;
    left: 0;
  }
  .luck_draw_footer_ware_title {
    text-align: center;
    margin-top: 2.3rem;
    img {
      width: 2.0933rem;
      height: 0.5067rem;
    }
  }
  .luck_draw_footer_ware_flex {
    width: 100%;
    margin: 0.36rem auto 0;
  }
}
.dialog_container {
  height: 5.4rem;
  width: 7.7333rem;
  margin: 2rem auto 0;
  background-image: url(../../../static/images/newYearActivities/dialogBc.png);
  background-size: 100% 100%;
  border: 1px solid black;
  .cont {
    margin: 0 auto;
    width: 4.8rem;
    border: 2px solid black;
    height: 5.4rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
    align-items: center;
    text-align: center;
    p {
      text-align: center;
      line-height: 1rem;
      font-size: 0.3467rem;
      color: #fff;
      span {
        color: #ffef6d;
      }
    }
  }
}
#lottery {
  width: 5.0667rem;
  height: 5.0667rem;
  margin: auto;
  position: relative;
  top: 3.3rem;
  background-image: url(../../../static/images/newYearActivities/lucking.png);
  background-size: 100%;
}

#lottery table td {
  width: 1.0667rem;
  height: 1.0667rem;
  text-align: center;
  vertical-align: middle;
  font-size: 24px;
  color: #333;
  line-height: 0rem;
}
#lottery table {
  width: 5.0667rem;
  height: 5.0667rem;
  padding: 0.2933rem;
  table-layout: fixed;
}

#lottery table td a {
  // width: 284px;
  // height: 284px;
  // line-height: 150px;
  display: block;
  text-decoration: none;
}

#lottery table td.active {
  background-color: #ea0000;
}

.copyDom {
  position: absolute;
  z-index: 100;
  transform: scale(1, 1);
  transition: transform 2s linear;
}

img {
  width: 1.0667rem;
  height: 1.0667rem;
}

#view-model {
  position: fixed;
  z-index: 100;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  justify-content: center;
  align-items: center;
  display: none;
  background-color: rgba(0, 0, 0, 0);
  transition: background-color 0.5s linear;
}

.view-model-content {
  width: 100px;
  height: 100px;
  transform: scale(0, 0);
  transition: transform 0.5s ease;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -50px;
  margin-top: -50px;
  text-align: center;
}

.view-model-content img {
  width: 100%;
  height: 100%;
}
</style>

